<template>
  <div class="incomeRateChart flex-h-sb">
    <div class="chart">
      <div style="margin-top: 40px"></div>
      <div
        v-if="refreshKey"
        :id="id"
        :class="className"
        :style="{ height: (height - 40) * 1.6 + 'px', width: width }"
      />
      <div
        v-if="refreshKey"
        :id="`${id}1`"
        :style="{ height: height * 0.72 + 'px', width: width }"
      />
      <div v-show="data_obj2[yName] && data_obj2[yName].length" class="tip">
        <p>本区间最大回撤：{{ sectionIncomeRate }}%</p>
        <p>({{ sectionDate }})</p>
      </div>
    </div>
    <div v-if="data_obj2[yName] && data_obj2[yName].length" class="control">
      <div
        v-show="showBeyondIncome"
        class="beyondIncome flex-h-sb flex-v-center"
      >
        <el-input :value="yName" disabled style="width: 45%"></el-input>
        <div class="shortline"></div>
        <!-- <el-select v-model="beyondIncome_index" @change="beyondIncomeHandle" style="width: 45%;">
          <el-option
            v-for="item in indexNames"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select> -->
        <indexSelectTree
          class="bi_indexSelectTree"
          :multiple="false"
          style="width: 45%"
          :indexType.sync="bi_index_id"
          size="small"
          :clearable="false"
          :realIntoBeyondIncome_name="realIntoBeyondIncome_name"
          @change="biIndexIdChange"
        ></indexSelectTree>
      </div>
      <div v-show="showReal" class="showReal flex flex-v-center">
        <el-checkbox
          style="margin: 2px 0 0 14px"
          class="flex-v-center"
          v-model="isShowReal"
          @change="isShowRealChange"
        >
        </el-checkbox>
        <div class="legend-name_real">
          <p style="padding-left: 6px">实盘对比</p>
          <div class="line" :style="`border: 1px solid #5B8FF9;`"></div>
        </div>
        <div style="margin-left: 15px" @click="$emit('realContrastHnadle')">
          <el-input
            size="small"
            style="width: 300px"
            placeholder="请选择实盘对比产品"
            v-model="realquery.childrenName"
            readonly
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-arrow-right"
              :class="
                realContrastMove
                  ? 'el-icon-circle-close pointer'
                  : 'el-icon-arrow-right'
              "
              @click.stop="clearRealquery"
              @mouseenter="realContrastMove = true"
              @mouseleave="realContrastMove = false"
            ></i>
          </el-input>
        </div>
      </div>
      <div class="legend">
        <div
          class="card flex-h-sb flex-v-center"
          v-for="(item, i) in nameLegendsCom"
          :key="i"
        >
          <div class="left tof flex-v-center">
            <el-checkbox
              style="margin: 2px 0 0 14px"
              class="flex-v-center"
              v-model="item.status"
              @change="legendHandle(item.name)"
            ></el-checkbox>
            <div class="legend-name tof">
              <p class="tof" style="padding-left: 6px">{{ item.name }}</p>
              <div
                class="line"
                :style="`border: 1px solid ${item.color};`"
              ></div>
            </div>
          </div>
          <div class="right">
            <p>
              {{ legendIncome(item.name) }}（年化{{
                legendAnnualizedIncome(item.name)
              }}）
            </p>
            <p>最大回撤：{{ legendMaxBack(item.name) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";
import { debounce, deepClone, parseTime } from "@/utils";
import { differenceInCalendarMonths } from "date-fns"; // differenceInDays
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import {
  yAxisNumber,
  xReturnZero2,
  chartDateFreq,
  getWeekData2,
  getMonthData2,
  listAfterClearNull,
} from "@/utils/pro";

export default {
  mixins: [resize],
  components: {
    indexSelectTree,
  },
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: Number,
      default: 200,
    },
    yName: {
      type: String,
      required: true,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    data22: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legendStatus: {
      // 记录图例选择状态
      type: Object,
      default: () => {
        return {};
      },
    },
    contrastOptions_obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dateFreq: {
      // 计算频率
      type: Number,
      default: undefined,
    },
    defaultDateFreq: {
      // 默认频率
      type: Number,
      default: undefined,
    },
    showBeyondIncome: {
      // 超额收益
      type: Boolean,
      default: false,
    },
    showReal: {
      // 显示实盘
      type: Boolean,
      default: false,
    },
    indexNames: {
      type: Array,
      default: () => {
        return [];
      },
    },
    oneDoubleCut: {
      type: Boolean,
      default: false,
    },
    relativeIncome: {
      type: Boolean,
      default: false,
    },
    realquery: {
      type: Object | Array,
      default: "",
    },
    indexs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    biIndex: {
      type: String | Number,
    },
  },
  data() {
    return {
      realIntoBeyondIncome_name: "",
      realIntoBeyondIncome_data: [],
      realIntoBeyondIncome: false, // 用于记录超额已选实盘s

      chart: null,
      chart1: null,
      listLoading: false,

      realKey: null, // 实盘
      base_real_i: null,
      freq_base_real_i: null, // 当前频率
      w_freq_base_real_i: null, // 周频率
      m_freq_base_real_i: null, // 月频率

      mainKey: null, // 用于保存主轴key

      isIndexList: [],
      nameLegends: [],

      currentObj1: {},
      currentObj2: {},
      beyondIncome_index: "",

      xDate: [],
      data_obj1: {},
      data_obj2: {},

      day_xDate: [], // 日频y轴
      day_data_obj1: {}, // 日频收益集合
      day_data_obj2: {}, // 日频回撤集合

      week_xDate: [], // 周频y轴
      week_data_obj1: {}, // 周频收益集合
      week_data_obj2: {}, // 周频回撤集合

      month_xDate: [], // 月频y轴
      month_data_obj1: {}, // 月频收益集合
      month_data_obj2: {}, // 月频回撤集合

      color_list: [
        "rgba(225,103,86,1)",
        "rgba(129,183,236,1)",
        "rgba(173,224,255,1)",
        "rgba(255,155,203,1)",
        "#cca4e3",
        "#96ce54",
      ], //todo 颜色
      color_list_a: [
        "rgba(225,103,86,0.2)",
        "rgba(129,183,236,0.2)",
        "rgba(173,224,255,0.2)",
        "rgba(255,155,203,0.2)",
      ], //todo 颜色

      isShowReal: true,
      realContrastMove: false,

      bi_index_id: "", // 超额收益id

      relativeIncome_startNetworth: 1,

      tooltipIndex: 0, // 当前显示的图例的索引
    };
  },
  watch: {
    data: {
      handler(val) {
        this.initPage(val);
      },
      deep: true,
      immediate: true,
    },
    dateFreq(i) {
      if (i == 1) {
        this.dayFreqHandle();
      } else if (i == 2) {
        this.weekFreqHandle();
      } else if (i == 3) {
        this.monthFreqHandle();
      }
    },
    showBeyondIncome(val) {
      if (val) {
        if (this.realIntoBeyondIncome && this.realIntoBeyondIncome_name) {
          const i = this.indexNames.findIndex((item) => item.id == -1);
          if (i != -1) {
            this.bi_index_id = -1;
            this.biIndexIdChange(this.bi_index_id);
          }
        } else {
          if (this.showBeyondIncome && !this.beyondIncome_index) {
            this.beyondIncome_index = this.indexNames[0].name;
            this.bi_index_id = this.indexNames[0].id;
          }
          this.beyondIncomeHandle(this.beyondIncome_index);
        }
      } else {
        if (this.data_obj1["超额收益"]) {
          delete this.data_obj1["超额收益"];
          delete this.data_obj2["超额收益"];
          delete this.day_data_obj1["超额收益"];
          delete this.day_data_obj2["超额收益"];
          delete this.week_data_obj1["超额收益"];
          delete this.week_data_obj2["超额收益"];
          delete this.month_data_obj1["超额收益"];
          delete this.month_data_obj2["超额收益"];
          this.nameLegends.shift();
          if (this.realquery && this.isShowReal) {
            this.nameLegends.slice(-1)[0].status = true;
            this.legendStatus[this.realquery.childrenName] = true;
          }
          this.chart && this.chart.dispose();
          this.chart1 && this.chart1.dispose();
          this.$nextTick(() => {
            this.initChart(this.xDate, this.data_obj1, this.data_obj2);
          });
        }
      }
    },
    relativeIncome() {
      this.initPage(this.data);
    },
    oneDoubleCut() {
      this.initPage(this.data);
    },
  },
  computed: {
    nameLegendsCom() {
      return this.nameLegends.filter(
        (item) => item.name != this.realquery.childrenName
      );
    },
    sectionIncomeRate() {
      if (
        !(this.chart1 && this.chart1.getModel() && this.data_obj2[this.yName])
      ) {
        return "";
      }
      const start_i = this.chart1.getModel().option.dataZoom[0].startValue;
      const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
      const list = this.data_obj2[this.yName].slice(start_i, end_i + 1);
      const min = Math.min.apply(null, list);
      return min;
    },
    sectionDate() {
      if (
        !(this.chart1 && this.chart1.getModel() && this.data_obj2[this.yName])
      ) {
        return "";
      }
      const start_i = this.chart1.getModel().option.dataZoom[0].startValue;
      const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
      const list = this.data_obj2[this.yName].slice(start_i, end_i + 1);
      const min = Math.min.apply(null, list);
      const i = list.findIndex((item) => item == min);
      return this.xDate[i + start_i];
    },
    legendIncome() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj1[key])[0];
        if (!list.length) {
          return "--";
        } else {
          return list[list.length - 1] + "%";
        }
      };
    },
    legendAnnualizedIncome() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj1[key])[0];
        if (!list.length) return "--";
        const start_i =
          this.chart && this.chart.getModel()
            ? this.chart.getModel().option.dataZoom[0].startValue
            : 0;
        const end_i =
          this.chart && this.chart.getModel()
            ? this.chart.getModel().option.dataZoom[0].endValue
            : list.length - 1;
        const dm = differenceInCalendarMonths(
          this.xDate[end_i],
          this.xDate[start_i]
        )
          ? differenceInCalendarMonths(this.xDate[end_i], this.xDate[start_i])
          : 1;
        const yearAnnualizedincomeRate = (list.slice(-1) / (dm / 12)).toFixed(
          2
        );
        return yearAnnualizedincomeRate + "%";
      };
    },
    legendMaxBack() {
      return (key) => {
        if (!this.currentObj1[key]) return "";
        const list = listAfterClearNull(this.currentObj2[key])[0];
        if (!list.length) return "--";
        const min = Math.min.apply(null, list);
        return Math.abs(min) + "%";
      };
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    this.chart1.dispose();
    this.chart1 = null;
  },
  methods: {
    initPage(val) {
      if (this.showBeyondIncome && !this.beyondIncome_index) {
        // 超额选取记录回显
        if (this.biIndex) {
          this.bi_index_id = this.biIndex;
          this.beyondIncome_index = this.contrastOptions_obj[this.biIndex];
        } else {
          this.beyondIncome_index = this.indexNames[0].name;
          this.bi_index_id = this.indexNames[0].id;
        }
      }
      this.realKey = null;
      this.base_real_i = null;
      const list = deepClone(val);
      (this.xDate = []),
        (this.day_xDate = []),
        (this.week_xDate = []),
        (this.month_xDate = []);
      (this.data_obj1 = {}),
        (this.day_data_obj1 = {}),
        (this.week_data_obj1 = {}),
        (this.month_data_obj1 = {});
      (this.data_obj2 = {}),
        (this.day_data_obj2 = {}),
        (this.week_data_obj2 = {}),
        (this.month_data_obj2 = {});
      this.nameLegends = [];

      list[0].item.map((m, i) => {
        this.data_obj1[m.key] = [];
        this.data_obj2[m.key] = [];
        if (i == 0) this.mainKey = m.key;
        this.nameLegends.push({
          main: i ? 0 : 1,
          name: m.key,
          realTag: m.realTag,
          color:
            this.realquery && m.key == this.realquery.childrenName
              ? "#5B8FF9"
              : this.color_list[i],
          status:
            this.legendStatus[m.key] != undefined
              ? this.legendStatus[m.key]
              : true,
        });
      });
      this.isIndexList = list[0].item
        .filter((e) => e.isIndex)
        .map((e) => e.key);
      const n_list = [];
      const base_incomeRate_drawDown_list = [];
      let base_real;
      list.map((items, i) => {
        this.xDate.push(items.date);
        items.item.map((el, j) => {
          el.pnl = el.pnl ? Number(el.pnl) : 0;
          if (n_list[j] == undefined) n_list[j] = 0;
          if (el.isIndex) {
            if (i > 0) n_list[j] = (1 + n_list[j]) * (1 + el.pnl) - 1;
          } else if (el.realTag) {
            if (this.base_real_i == null && el.netWorth != null) {
              this.base_real_i = i; // 防止再次进入此if
              this.freq_base_real_i = i;
              base_real = items.item[0].incomeRate / 100; // 实例的基准
            } else {
              this.realKey = el.key;
              n_list[j] = Number(n_list[j]) + el.pnl;
            }
          } else {
            if (i > 0) {
              if (!this.oneDoubleCut) {
                n_list[j] = Number(n_list[j]) + el.pnl;
              } else {
                n_list[j] = (1 + n_list[j]) * (1 + el.pnl) - 1;
              }
            }
          }
          if (el.realTag) {
            el.incomeRate =
              el.netWorth != null
                ? ((n_list[j] + base_real) * 100).toFixed(2)
                : null;
          } else {
            if (!el.isIndex && this.relativeIncome) {
              this.relativeIncome_startNetworth = list[0].item[0].netWorth;
              el.incomeRate =
                el.netWorth != null
                  ? ((n_list[j] * 100) / list[0].item[0].netWorth).toFixed(2)
                  : null;
            } else {
              el.incomeRate =
                el.netWorth != null ? (n_list[j] * 100).toFixed(2) : null;
            }
          }
          this.data_obj1[el.key].push(el.incomeRate);
          if (el.incomeRate == null) {
            this.data_obj2[el.key][i] = null;
          } else if (
            Number(el.incomeRate) < Number(base_incomeRate_drawDown_list[j])
          ) {
            if (!this.oneDoubleCut && !el.isIndex) {
              this.data_obj2[el.key][i] = (
                el.incomeRate - base_incomeRate_drawDown_list[j]
              ).toFixed(2); // 单利回撤
            } else {
              this.data_obj2[el.key][i] = (
                ((el.incomeRate - base_incomeRate_drawDown_list[j]) /
                  (Number(base_incomeRate_drawDown_list[j]) + 100)) *
                100
              ).toFixed(2); // 复利回撤
            }
          } else {
            base_incomeRate_drawDown_list[j] = el.incomeRate;
            this.data_obj2[el.key][i] = 0;
          }
        });
      });

      this.currentObj1 = this.data_obj1;
      this.currentObj2 = this.data_obj2;

      // console.log('nameLegends', this.nameLegends);

      // 实盘加入超额可选
      this.addRealIntoBeyondIncome();

      const _defaultDateFreq = chartDateFreq(this.xDate);
      this.$emit("update:defaultDateFreq", _defaultDateFreq);
      const _dateFreq = _defaultDateFreq;
      _dateFreq == 1
        ? (this.day_xDate = this.xDate)
        : _dateFreq == 2
        ? (this.week_xDate = this.xDate)
        : (this.month_xDate = this.xDate);
      _dateFreq == 1
        ? (this.day_data_obj1 = this.data_obj1)
        : _dateFreq == 2
        ? (this.week_data_obj1 = this.data_obj1)
        : (this.month_data_obj1 = this.data_obj1);
      _dateFreq == 1
        ? (this.day_data_obj2 = this.data_obj2)
        : _dateFreq == 2
        ? (this.week_data_obj2 = this.data_obj2)
        : (this.month_data_obj2 = this.data_obj2);

      if (this.dateFreq == undefined || this.dateFreq != _defaultDateFreq) {
        this.$emit("update:dateFreq", _dateFreq); // 一般为首次进入，则_dateFreq==_defaultDateFreq，watch触发绘制默认频率
      } else {
        if (this.dateFreq != _dateFreq) {
          // 当前选中不为默认频率，则绘制选中频率
          if (this.dateFreq == 1) {
            this.dayFreqHandle();
          } else if (this.dateFreq == 2) {
            this.weekFreqHandle();
          } else {
            this.monthFreqHandle();
          }
        } else {
          // 当前选中等于默认频率，直接绘制
          this.draw();
        }
      }
    },

    initChart(xDate, obj1, obj2) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart1 = echarts.init(document.getElementById(this.id + "1"));

      let all_list_obj1 = [];
      const series1 = [];
      const series2 = [];

      const start_i = this.chart.getModel()
        ? this.chart.getModel().option.dataZoom[0].startValue
        : 0;
      const end_i = this.chart.getModel()
        ? this.chart.getModel().option.dataZoom[0].endValue
        : obj1[this.yName].length;
      const view_obj = [{}, {}];

      if (Object.keys(obj1).length) {
        Object.keys(obj1).forEach((key) => {
          view_obj[0][key] = obj1[key].slice(start_i, end_i);
          const item = obj1[key];
          if (this.legendStatus[key] == undefined || this.legendStatus[key]) {
            all_list_obj1 = [...all_list_obj1, ...item];
          }
          series1.push({
            name: key,
            type: "line",
            symbolSize: 2,
            symbol: "emptyCircle",
            showSymbol: false,
            lineStyle: {
              width: 1.6,
            },
            itemStyle: {
              color: this.nameLegends.find((item) => item.name == key).color,
            },
            data: item,
            connectNulls: true,
          });
        });
      }
      const yVal = yAxisNumber(all_list_obj1);

      if (Object.keys(obj2).length) {
        Object.keys(obj2).forEach((key, i) => {
          const nameLegend = this.nameLegends.find((item) => item.name == key);
          view_obj[1][key] = obj2[key].slice(start_i, end_i);
          const item = obj2[key];
          series2.push({
            name: key,
            type: "line",
            symbolSize: 2,
            symbol: "emptyCircle",
            showSymbol: false,
            itemStyle: {
              color: nameLegend.color,
            },
            lineStyle: {
              width: 1.6,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: nameLegend.main
                    ? this.color_list_a[0]
                    : "rgba(0,0,0,0)",
                },
                {
                  offset: 1,
                  color: nameLegend.main ? this.color_list[0] : "rgba(0,0,0,0)",
                },
              ]),
            },
            data: item,
            connectNulls: true,
          });
          if (nameLegend.main) {
            series2[i].markLine = {
              data: [
                {
                  type: "min",
                },
              ],
              label: { show: false },
            };
          }
        });
      }
      view_obj[2] = this.xDate.slice(start_i, end_i);
      this.$emit("viewObj", view_obj);

      this.chart.setOption({
        title: {
          left: 52,
          text: "收益",
          top: 10,
          textStyle: {
            color: "#595959",
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: 'axis',
          className: 'chart-tooltip',
          axisPointer: {
            textStyle: {
              color: "#fff",
            },
          },
          position: (point) => {
            return [point[0] + 25, point[1] - 50];
          },
          appendToBody: true,
          formatter: (params) => {
            this.tooltipIndex = params[0].dataIndex
            const params1 = this.chart1.getOption().series;
            let str = "";
            str += `<div style="padding-bottom: 2px;display:flex;justify-content: space-between;"><span>${parseTime(
              params[0].name
            )}</span><span>收益 (回撤)</span></div>`;
            for (let i = 0; i < params.length; i += 1) {
              const p1_i = params1.findIndex(
                (item) => item.name == params[i].seriesName
              );
              if (params[i].data != null) {
                if (params[i].seriesName != this.realKey) {
                  str += `<div style="display: flex;justify-content: space-between;">
                      <div style="display: flex;align-items: center;">
                        ${params[i].marker}
                        <span class="proName_tof" style="flex:1;">${
                          params[i].seriesName
                        }</span>
                      </div>
                      <span style="margin-left: 10px;font-weight: bold;"> ${
                        params[i].data
                      }% (${params1[p1_i].data[params[i].dataIndex]}%)</span>
                      </div>`;
                } else {
                  const realTime_baseval =
                    this.chart
                      .getOption()
                      .series.find((item) => item.name == this.realKey).data[
                      this.freq_base_real_i
                    ] || 0;
                  str += `<div style="display: flex;justify-content: space-between;">
                      <div style="display: flex;align-items: center;">
                        ${params[i].marker}
                        <span style="flex:1;">${params[i].seriesName}</span>
                      </div>
                      <span style="margin-left: 10px;font-weight: bold;">
                      ${
                        params[i].data != null
                          ? (params[i].data - realTime_baseval).toFixed(2)
                          : params[i].data
                      }%
                       (${params1[p1_i].data[params[i].dataIndex]}%)
                      </span>
                      </div>`;
                }
              } else {
                str += `<div style="display: flex;justify-content: space-between;">
                  <div style="display: flex;align-items: center;">
                    ${params[i].marker}
                    <span class="proName_tof" style="flex:1;">${params[i].seriesName}</span>
                  </div>
                  <span style="margin-left: 10px;font-weight: bold;">
                    -- (--%)
                  </span>
                  </div>`;
              }
            }
            return str;
          },
        },
        grid: {
          top: 10,
          left: 55,
          right: 10,
          bottom: "6%",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
          orient: "vertical",
          x: "left",
          left: "82%",
          top: "10%",
          textStyle: {
            color: "#90979c",
            fontSize: 11,
          },
          formatter: (name) => {
            const start_i = this.chart.getModel().option.dataZoom[0].startValue;
            const end_i = this.chart.getModel().option.dataZoom[0].endValue;
            const obj = this.chart
              .getOption()
              .series.find((item) => item.name == name);
            const dm = differenceInCalendarMonths(
              this.xDate[end_i],
              this.xDate[start_i]
            )
              ? differenceInCalendarMonths(
                  this.xDate[end_i],
                  this.xDate[start_i]
                )
              : 1;
            const yearAnnualizedincomeRate = (
              obj.data[end_i] /
              (dm / 12)
            ).toFixed(2);
            return obj.data[end_i]
              ? name +
                  "   " +
                  obj.data[end_i] +
                  "%" +
                  " (年化:" +
                  yearAnnualizedincomeRate +
                  "%)"
              : name + "   " + "--";
          },
          selected: this.legendStatus,
        },
        calculable: true,
        xAxis: [
          {
            show: false,
            type: "category",
            boundaryGap: false, // 折线从x轴起始开始走
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
              interval: "auto",
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: "auto",
              margin: 20,
            },
            data: xDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: yVal[0],
            max: yVal[1],
            interval: yVal[2],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                // return value.toFixed(0) + '%' // todo y轴颗粒度
                return value.toFixed(2) + "%";
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            start: 0,
            end: 100,
          },
          {
            show: false,
            start: 0,
            end: 100,
            realtime: true,
            height: "6%",
            bottom: "8%",
          },
        ],
        series: series1,
      });

      this.chart1.setOption({
        title: {
          left: 52,
          text: "回撤",
          top: 10,
          textStyle: {
            color: "#595959",
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff",
            },
          },
          formatter() {
            return "";
          },
        },
        grid: {
          top: 10,
          left: 55,
          right: 10,
          bottom: "37%",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
          orient: "vertical",
          x: "left",
          left: "82%",
          top: "2%",
          textStyle: {
            color: "#90979c",
            fontSize: 11,
          },
          formatter: (name) => {
            const start_i =
              this.chart1.getModel().option.dataZoom[0].startValue;
            const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
            const list = this.data_obj2[name].slice(start_i, end_i + 1);
            const min = Math.min.apply(null, list);
            // return min<-20 ? name + '{a|' + min + '%}' : name + '{b|' + min + '%}'  // 此处通过条件判断赋值abc,可实现动态样式
            return name + "   " + min + "%";
          },
          selected: this.legendStatus,
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 折线从x轴起始开始走
            axisLine: {
              show: false,
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              margin: 20,
              interval: "auto",
            },
            data: xDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                return value + "%";
              },
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            type: "slider",
            start: 0,
            end: 100,
            realtime: true,
            height: "0%",
            bottom: "18%",
          },
          {
            brushSelect: false,
            realtime: true, // 实时更新系列的视图
            height: "14%",
            bottom: "1%",
          },
        ],
        series: series2,
      });

      this.chart.on("highlight", (params) => {
        if(!document.onkeydown) this.keyDownHnadle()
        const obj = params.batch[0];
        this.chart1.dispatchAction({
          type: "showTip",
          seriesIndex: obj.seriesIndex,
          dataIndex: obj.dataIndex,
        });
      });
      this.chart1.on("highlight", (params) => {
        const obj = params.batch[0];
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: obj.seriesIndex,
          dataIndex: obj.dataIndex,
        });
      });

      this.chart.on(
        "datazoom",
        debounce(() => {
          const baseline_i =
            this.chart.getModel().option.dataZoom[0].startValue;
          const end_i = this.chart.getModel().option.dataZoom[0].endValue;
          const relativeIncome_coeff = this.relativeIncome
            ? this.data[baseline_i].item[0].netWorth
            : 1;
          const _data_obj1 = JSON.parse(JSON.stringify(this.data_obj1));
          if (this.relativeIncome && this.relativeIncome_startNetworth != 1) {
            // 相对收益 当初始绘制时初期净值不为1时应该把除掉的初期净值乘回来
            _data_obj1[this.yName] = _data_obj1[this.yName].map((do1) => {
              return do1 ? do1 * this.relativeIncome_startNetworth : do1;
            });
          }
          let op = this.chart.getOption();
          let op1 = this.chart1.getOption();
          // this.oneDoubleCut+1和组合保持一致，1单利，其余复利
          const op_res = xReturnZero2(
            _data_obj1,
            this.data_obj2,
            op,
            op1,
            baseline_i,
            end_i,
            this.isIndexList,
            this.realKey,
            this.freq_base_real_i,
            this.mainKey,
            this.oneDoubleCut + 1,
            relativeIncome_coeff
          );
          op = op_res.op;
          op1 = op_res.op1;
          const view_obj = [{}, {}];
          this.currentObj1 = {};
          this.currentObj2 = {};
          Object.keys(this.data_obj1).forEach((key) => {
            const _obj1 = op.series.filter((item) => item.name == key)[0];
            const _obj2 = op1.series.filter((item) => item.name == key)[0];
            view_obj[0][key] = _obj1.data.slice(baseline_i, end_i + 1);
            view_obj[1][key] = _obj2.data.slice(baseline_i, end_i + 1);

            this.currentObj1[key] = view_obj[0][key];
            this.currentObj2[key] = view_obj[1][key];
          });
          view_obj[2] = this.xDate.slice(baseline_i, end_i + 1);
          this.$emit("viewObj", view_obj);
          const yVal = yAxisNumber(op_res.all_list_obj1);
          op.yAxis[0].min = yVal[0];
          op.yAxis[0].max = yVal[1];
          op.yAxis[0].interval = yVal[2];
          op1.dataZoom[0].start = op.dataZoom[0].start;
          op1.dataZoom[0].end = op.dataZoom[0].end;
          op1.dataZoom[1].start = op.dataZoom[1].start;
          op1.dataZoom[1].end = op.dataZoom[1].end;
          this.chart.setOption(op);
          this.chart1.setOption(op1);
        }, 500)
      );

      this.chart1.on(
        "datazoom",
        debounce(() => {
          const baseline_i =
            this.chart1.getModel().option.dataZoom[0].startValue;
          const end_i = this.chart1.getModel().option.dataZoom[0].endValue;
          const relativeIncome_coeff = this.relativeIncome
            ? this.data[baseline_i].item[0].netWorth
            : 1;
          const _data_obj1 = JSON.parse(JSON.stringify(this.data_obj1));
          if (this.relativeIncome && this.relativeIncome_startNetworth != 1) {
            // 相对收益 当初始绘制时初期净值不为1时应该把除掉的初期净值乘回来
            _data_obj1[this.yName] = _data_obj1[this.yName].map((do1) => {
              return do1 ? do1 * this.relativeIncome_startNetworth : do1;
            });
          }
          let op = this.chart.getOption();
          let op1 = this.chart1.getOption();
          const op_res = xReturnZero2(
            _data_obj1,
            this.data_obj2,
            op,
            op1,
            baseline_i,
            end_i,
            this.isIndexList,
            this.realKey,
            this.freq_base_real_i,
            this.mainKey,
            this.oneDoubleCut + 1,
            relativeIncome_coeff
          );
          op = op_res.op;
          op1 = op_res.op1;
          // if(this.realKey&&this.showBeyondIncome&&this.bi_index_id==-1) {
          if (this.showBeyondIncome) {
            // 解决超额曲线计算时，副线不和主曲线同长度时计算错误的问题
            const name2 = this.realIntoBeyondIncome
              ? this.realKey
              : this.beyondIncome_index;
            const list1 = op.series.find(
              (item) => item.name == this.mainKey
            ).data;
            const list2 = op.series.find((item) => item.name == name2).data;
            const res = this.datazoomGetBeyondIncome(list1, list2)[0];
            op.series.find((item) => item.name == "超额收益").data = res;
            op_res.all_list_obj1 = [...op_res.all_list_obj1, ...res];
          }
          const view_obj = [{}, {}];
          this.currentObj1 = {};
          this.currentObj2 = {};
          Object.keys(this.data_obj1).forEach((key) => {
            const _obj1 = op.series.filter((item) => item.name == key)[0];
            const _obj2 = op1.series.filter((item) => item.name == key)[0];
            view_obj[0][key] = _obj1.data.slice(baseline_i, end_i + 1);
            view_obj[1][key] = _obj2.data.slice(baseline_i, end_i + 1);

            this.currentObj1[key] = view_obj[0][key];
            this.currentObj2[key] = view_obj[1][key];
          });
          view_obj[2] = this.xDate.slice(baseline_i, end_i + 1);
          this.$emit("viewObj", view_obj);
          const yVal = yAxisNumber(op_res.all_list_obj1);
          op.yAxis[0].min = yVal[0];
          op.yAxis[0].max = yVal[1];
          op.yAxis[0].interval = yVal[2];
          op.dataZoom[0].start = op1.dataZoom[0].start;
          op.dataZoom[0].end = op1.dataZoom[0].end;
          op.dataZoom[1].start = op1.dataZoom[1].start;
          op.dataZoom[1].end = op1.dataZoom[1].end;
          this.chart.setOption(op);
          this.chart1.setOption(op1);
        }, 500)
      );

      this.chart.on("legendselectchanged", (obj) => {
        let op = this.chart.getOption();
        let op1 = this.chart1.getOption();
        op1.legend[0].selected = obj.selected;

        // 记录图例状态
        this.savaLegendStatus(obj.selected);

        const baseline_i = this.chart1.getModel().option.dataZoom[0].startValue;
        const end_i = this.chart1.getModel().option.dataZoom[0].endValue;

        const relativeIncome_coeff = this.relativeIncome
          ? this.data[baseline_i].item[0].netWorth
          : 1;
        const _data_obj1 = JSON.parse(JSON.stringify(this.data_obj1));
        if (this.relativeIncome && this.relativeIncome_startNetworth != 1) {
          // 相对收益 当初始绘制时初期净值不为1时应该把除掉的初期净值乘回来
          _data_obj1[this.yName] = _data_obj1[this.yName].map((do1) => {
            return do1 ? do1 * this.relativeIncome_startNetworth : do1;
          });
        }
        const op_res = xReturnZero2(
          _data_obj1,
          this.data_obj2,
          op,
          op1,
          baseline_i,
          end_i,
          this.isIndexList,
          this.realKey,
          this.freq_base_real_i,
          this.mainKey,
          this.oneDoubleCut + 1,
          relativeIncome_coeff
        );
        op = op_res.op;
        op1 = op_res.op1;
        if (this.showBeyondIncome) {
          // 解决超额曲线计算时，副线不和主曲线同长度时计算错误的问题
          const name2 = this.realIntoBeyondIncome
            ? this.realKey
            : this.beyondIncome_index;
          const list1 = op.series.find(
            (item) => item.name == this.mainKey
          ).data;
          const list2 = op.series.find((item) => item.name == name2).data;
          const res = this.datazoomGetBeyondIncome(list1, list2)[0];
          op.series.find((item) => item.name == "超额收益").data = res;
          op_res.all_list_obj1 = [...op_res.all_list_obj1, ...res];
        }
        const yVal = yAxisNumber(op_res.all_list_obj1);
        op.yAxis[0].min = yVal[0];
        op.yAxis[0].max = yVal[1];
        op.yAxis[0].interval = yVal[2];
        this.chart.setOption(op);
        this.chart1.setOption(op1);
      });

      this.chart1.on("legendselectchanged", (obj) => {
        let op = this.chart.getOption();
        let op1 = this.chart1.getOption();
        op.legend[0].selected = obj.selected;

        // 记录图例状态
        this.savaLegendStatus(obj.selected);

        const baseline_i = this.chart1.getModel().option.dataZoom[0].startValue;
        const end_i = this.chart1.getModel().option.dataZoom[0].endValue;

        const relativeIncome_coeff = this.relativeIncome
          ? this.data[baseline_i].item[0].netWorth
          : 1;
        const _data_obj1 = JSON.parse(JSON.stringify(this.data_obj1));
        if (this.relativeIncome && this.relativeIncome_startNetworth != 1) {
          // 相对收益 当初始绘制时初期净值不为1时应该把除掉的初期净值乘回来
          _data_obj1[this.yName] = _data_obj1[this.yName].map((do1) => {
            return do1 ? do1 * this.relativeIncome_startNetworth : do1;
          });
        }
        const op_res = xReturnZero2(
          _data_obj1,
          this.data_obj2,
          op,
          op1,
          baseline_i,
          end_i,
          this.isIndexList,
          this.realKey,
          this.freq_base_real_i,
          this.mainKey,
          this.oneDoubleCut + 1,
          relativeIncome_coeff
        );
        op = op_res.op;
        op1 = op_res.op1;
        if (this.showBeyondIncome) {
          // 解决超额曲线计算时，副线不和主曲线同长度时计算错误的问题
          const name2 = this.realIntoBeyondIncome
            ? this.realKey
            : this.beyondIncome_index;
          const list1 = op.series.find(
            (item) => item.name == this.mainKey
          ).data;
          const list2 = op.series.find((item) => item.name == name2).data;
          const res = this.datazoomGetBeyondIncome(list1, list2)[0];
          op.series.find((item) => item.name == "超额收益").data = res;
          op_res.all_list_obj1 = [...op_res.all_list_obj1, ...res];
        }
        const yVal = yAxisNumber(op_res.all_list_obj1);
        op.yAxis[0].min = yVal[0];
        op.yAxis[0].max = yVal[1];
        op.yAxis[0].interval = yVal[2];
        this.chart.setOption(op);
        this.chart1.setOption(op1);
      });

      this.chart.on("globalout", () => {
        this.chart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: -1,
        });
        document.onkeydown = null;
      });
      this.chart1.on("globalout", () => {
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: -1,
        });
        document.onkeydown = null;
      });
    },

    // 左右键控制提示框移动
    // 监听
    keyDownHnadle() {
      if (!document.onkeydown) {
        document.onkeydown = (event) => {
          const e = event || window.event;
          const keyCode = e.keyCode || e.which;
          if(keyCode==37) {
            this.tooltipIndex--
            this.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: this.tooltipIndex,
            });
          }
          if(keyCode==39) {
            this.tooltipIndex++
            this.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: this.tooltipIndex,
            });
          }
        };
      }
    },

    biIndexIdChange(val) {
      if (val != -1) {
        this.realIntoBeyondIncome = false;

        this.beyondIncome_index = this.contrastOptions_obj[this.bi_index_id];
        this.$emit("update:indexs", [...this.indexs, this.bi_index_id]);
        this.$emit("update:biIndex", this.bi_index_id);
      } else {
        this.realIntoBeyondIncome = true;
        const i = this.indexNames.findIndex((item) => item.id == -1);
        if (i != -1) this.indexNames.splice(i, 1);
        this.bi_index_id = -1;
        this.indexNames.push({ id: val, name: this.realIntoBeyondIncome_name });
        this.beyondIncomeHandle(this.realIntoBeyondIncome_name);
      }
    },
    addRealIntoBeyondIncome() {
      const obj = this.nameLegends.find((item) => item.realTag);
      if (obj) {
        this.realIntoBeyondIncome_name = obj.name;
        this.realIntoBeyondIncome_data = this.data_obj1[obj.name];
      } else {
        this.realIntoBeyondIncome_name = "";
        this.realIntoBeyondIncome_data = [];
      }
    },

    // 滑动后重新计算超额/回撤
    datazoomGetBeyondIncome(list1, list2) {
      const res = [[], []];
      let base_l2;
      list1.forEach((l1, i) => {
        const l2 = list2[i];
        if (base_l2 == undefined && l2 != null) base_l2 = l2;
        if (l1 != null && l2 != null) {
          if (this.realIntoBeyondIncome) {
            // 超额需要做显示值和实际值校准
            res[0][i] = (l1 - (l2 - base_l2)).toFixed(2);
          } else {
            res[0][i] = (l1 - l2).toFixed(2);
          }
        } else {
          res[0][i] = null;
        }
      });
      return res;
    },

    clearRealquery() {
      const res = {
        childrenId: null,
        childrenName: null,
        childrenType: null,
      };
      this.$emit("clearRealquery", res);
    },

    isShowRealChange(val) {
      if (!Object.keys(this.realquery).length) return;
      if (val) {
        if (
          this.nameLegends[0].status &&
          !this.nameLegends.slice(-1)[0].status
        ) {
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: this.realquery.childrenName,
          });
          this.nameLegends.slice(-1)[0].status =
            !this.nameLegends.slice(-1)[0].status;
        }
      } else {
        if (this.nameLegends.slice(-1)[0].status) {
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: this.realquery.childrenName,
          });
          this.nameLegends.slice(-1)[0].status =
            !this.nameLegends.slice(-1)[0].status;
        }
      }
    },

    legendHandle(name) {
      if (name == this.nameLegends[0].name) {
        if (Object.keys(this.realquery).length && this.isShowReal) {
          this.nameLegends.slice(-1)[0].status =
            !this.nameLegends.slice(-1)[0].status;
          this.legendStatus[name] = this.nameLegends[0].status;
          this.legendStatus[this.realquery.childrenName] =
            this.nameLegends.slice(-1)[0].status;
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name,
          });
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name: this.realquery.childrenName,
          });
        } else {
          this.legendStatus[name] = this.nameLegends[0].status;
          this.chart.dispatchAction({
            type: "legendToggleSelect",
            name,
          });
        }
      } else {
        this.legendStatus[name] = this.nameLegends.find(
          (nl) => nl.name == name
        ).status;
        this.chart.dispatchAction({
          type: "legendToggleSelect",
          name,
        });
      }
    },

    beyondIncomeHandle(val) {
      if (!val) return;
      const name1 = this.yName;
      const name2 = val;
      if (this.nameLegends[0].name != "超额收益") {
        this.nameLegends.unshift({
          name: "超额收益",
          color: "#F6BD16",
          status: true,
        });
      }
      if (this.realquery.childrenId && !this.realIntoBeyondIncome) {
        this.nameLegends.slice(-1)[0].status = false;
        this.legendStatus[this.realquery.childrenName] = false;
      } else {
        this.nameLegends.slice(-1)[0].status = true;
        this.legendStatus[this.realquery.childrenName] = true;
      }
      this.data_obj1["超额收益"] = [];
      this.data_obj2["超额收益"] = [];
      let base_val = 0;
      let ribi_base_val;
      this.data_obj1[name1].forEach((e, i) => {
        if (e != null && this.data_obj1[name2][i] != null) {
          let e2 = this.data_obj1[name2][i];
          if (this.realIntoBeyondIncome) {
            if (!ribi_base_val) ribi_base_val = e2;
            e2 = e2 - ribi_base_val;
          }
          const num = (e - e2).toFixed(2);
          this.data_obj1["超额收益"].push(num);
          if (Number(num) > base_val) {
            base_val = Number(num);
            this.data_obj2["超额收益"].push(0);
          } else {
            this.data_obj2["超额收益"].push((num - base_val).toFixed(2));
          }
        } else {
          this.data_obj1["超额收益"].push(null);
          this.data_obj2["超额收益"].push(null);
        }
      });
      this.chart && this.chart.dispose();
      this.chart1 && this.chart1.dispose();
      this.$nextTick(() => {
        this.initChart(this.xDate, this.data_obj1, this.data_obj2);
      });
    },

    dayFreqHandle() {
      this.freq_base_real_i = this.base_real_i;
      this.xDate = this.day_xDate;
      this.data_obj1 = this.day_data_obj1;
      this.data_obj2 = this.day_data_obj2;
      this.currentObj1 = this.data_obj1;
      this.currentObj2 = this.data_obj2;
      // 如果超额曲线显示且对应指数也存在, 则保留超额曲线
      this.draw();
    },
    weekFreqHandle() {
      let res = [];
      if (this.week_xDate.length) {
        res = getWeekData2(
          this.week_xDate,
          this.week_data_obj1,
          this.week_data_obj2,
          this.isIndexList,
          this.realKey,
          this.w_freq_base_real_i,
          this.mainKey
        );
      } else {
        res = getWeekData2(
          this.day_xDate,
          this.day_data_obj1,
          this.day_data_obj2,
          this.isIndexList,
          this.realKey,
          this.base_real_i,
          this.mainKey
        );
      }
      this.freq_base_real_i = res[3]; // 数组长度改变，实例对齐点位置重新赋值
      this.w_freq_base_real_i = res[3];
      this.xDate = res[0];
      this.week_xDate = res[0];
      this.data_obj1 = res[1];
      this.week_data_obj1 = res[1];
      this.data_obj2 = res[2];
      this.week_data_obj2 = res[2];
      this.currentObj1 = this.data_obj1;
      this.currentObj2 = this.data_obj2;
      this.draw();
    },
    monthFreqHandle() {
      let res = [];
      if (this.month_xDate.length) {
        res = getMonthData2(
          this.month_xDate,
          this.month_data_obj1,
          this.month_data_obj2,
          this.isIndexList,
          this.realKey,
          this.m_freq_base_real_i,
          this.mainKey
        );
      } else if (this.day_xDate.length) {
        res = getMonthData2(
          this.day_xDate,
          this.day_data_obj1,
          this.day_data_obj2,
          this.isIndexList,
          this.realKey,
          this.base_real_i,
          this.mainKey
        );
      } else {
        res = getMonthData2(
          this.week_xDate,
          this.week_data_obj1,
          this.week_data_obj2,
          this.isIndexList,
          this.realKey,
          this.w_freq_base_real_i,
          this.mainKey
        );
      }
      this.freq_base_real_i = res[3]; // 数组长度改变，实例对齐点位置重新赋值
      this.m_freq_base_real_i = res[3];
      this.xDate = res[0];
      this.month_xDate = res[0];
      this.data_obj1 = res[1];
      this.month_data_obj1 = res[1];
      this.data_obj2 = res[2];
      this.month_data_obj2 = res[2];
      this.currentObj1 = this.data_obj1;
      this.currentObj2 = this.data_obj2;
      this.draw();
    },
    // 绘制
    draw() {
      if (this.showBeyondIncome) {
        if (this.realIntoBeyondIncome && this.realIntoBeyondIncome_name) {
          // 后加 实盘超额的判定
          const i = this.indexNames.findIndex((item) => item.id == -1);
          if (i != -1) {
            this.bi_index_id = -1;
            this.biIndexIdChange(this.bi_index_id);
          }
        } else {
          this.beyondIncomeHandle(this.beyondIncome_index);
        }
      } else {
        this.chart && this.chart.dispose();
        this.chart1 && this.chart1.dispose();
        this.$nextTick(() => {
          this.initChart(this.xDate, this.data_obj1, this.data_obj2);
        });
      }
    },

    // 记录图例状态
    savaLegendStatus(obj) {
      const res = JSON.parse(JSON.stringify(this.legendStatus));
      Object.keys(obj).map((key) => {
        const status = obj[key];
        res[key] = status;
      });
      this.$emit("legendStatus", res);
    },
  },
};
</script>

<style lang="scss" scoped>
.incomeRateChart {
  .chart {
    width: calc(100% - 432px);
    position: relative;
    .tip {
      position: absolute;
      bottom: 76px;
      left: calc(100% - 180px);
      color: #666;
      p {
        text-align: right;
      }
    }
  }
  .control {
    width: 432px;
    display: flex;
    flex-direction: column;
    margin-left: 24px;
    .beyondIncome {
      margin-bottom: 15px;
      .shortline {
        width: 20px;
        border: 1px solid #d9d9d9;
      }
    }
    .showReal {
      padding: 0 13px 0 14px;
      margin-bottom: 15px;
    }
    .legend {
      min-width: 432px;
      height: 100%;
      overflow: auto;
      background: #fafafa;
      border-radius: 8px;
      .card {
        height: 48px;
        cursor: pointer;
        padding: 0 13px 0 14px;
        box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        &:hover {
          background: #ffffff;
          box-shadow: inset 0px -1px 0px 0px #f0f0f0;
        }
        .right {
          font-size: 12px;
          color: #8c8c8c;
          p {
            text-align: right;
          }
        }
      }
    }
    .legend-name {
      width: 230px;
      .line {
        width: 28px;
        margin-left: 6px;
      }
    }
    .legend-name_real {
      .line {
        width: 28px;
        margin-left: 6px;
      }
    }
  }
}
</style>
